@inherits AppComponentBase

@if (carouselProducts is null)
{
    <BitCard FullWidth>
        <BitStack HorizontalAlign="BitAlignment.Center">
            <BitStack Horizontal Class="carousel-stack">
                <BitShimmer Height="230px" Width="50%" Background="BitColor.PrimaryBackground" />
                <BitStack AutoHeight>
                    <br />
                    <BitShimmer Height="5rem" Width="100%" Background="BitColor.PrimaryBackground" />
                    <BitShimmer Height="1rem" Width="100%" Background="BitColor.PrimaryBackground" />
                    <BitShimmer Height="1rem" Width="100%" Background="BitColor.PrimaryBackground" />
                    <BitShimmer Height="2rem" Width="100%" Background="BitColor.PrimaryBackground" />
                </BitStack>
            </BitStack>
            <BitShimmer Height="1.5rem" Width="15rem" Background="BitColor.PrimaryBackground" />
        </BitStack>
    </BitCard>
}
else
{
    <BitCard FullWidth Style="position:relative">
        <BitCarousel @ref="carouselRef" Class="carousel" AutoPlay AutoPlayInterval="5000" HideNextPrev InfiniteScrolling>
            @foreach (var product in carouselProducts)
            {
                <BitCarouselItem Style="width:100%">
                    <BitLink Href="@product.PageUrl" NoUnderline Style="color:unset">
                        <BitStack Horizontal Class="carousel-stack">
                            <ProductImage Src="@GetProductImageUrl(product)" Alt="@product.PrimaryImageAltText" Width="50%" Class="carousel-image" />
                            <BitStack AutoHeight>
                                <br />
                                <BitText Typography="BitTypography.H3" Color="BitColor.Secondary">
                                    @product.Name
                                </BitText>
                                <div class="carousel-description">
                                    @((MarkupString)product.DescriptionHTML!)
                                </div>
                                <BitButton Color="BitColor.Tertiary">@Localizer[nameof(AppStrings.Buy)]</BitButton>
                            </BitStack>
                        </BitStack>
                    </BitLink>
                </BitCarouselItem>
            }
        </BitCarousel>
        <BitStack Horizontal FitSize Class="carousel-buttons">
            <BitButton IconOnly 
                       Size="BitSize.Small" 
                       Color="BitColor.Tertiary" 
                       OnClick="() => carouselRef.GoPrev()" 
                       IconName="@(CurrentDir is BitDir.Rtl ? BitIconName.ChevronRight : BitIconName.ChevronLeft)" />
            <BitButton IconOnly 
                       Size="BitSize.Small" 
                       Color="BitColor.Tertiary" 
                       OnClick="() => carouselRef.GoNext()" 
                       IconName="@(CurrentDir is BitDir.Rtl ? BitIconName.ChevronLeft : BitIconName.ChevronRight)" />
        </BitStack>
    </BitCard>
}